<template>
  <div class="dashboard-container">
    <!-- 上 -->
    <el-row :gutter="20" class="content">
      <!-- 左上 -->
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <!-- task -->
            <el-col :span="13">
              <task-count />
            </el-col>
            <!-- order -->
            <el-col :span="11">
              <OrderCount />
              <el-col />
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <sale-data />
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="6">
        <HotProduct />
      </el-col>
    </el-row>
    <!-- 下 -->
    <el-row :gutter="20">
      <el-col :span="14">
        <node-collect />
      </el-col>
      <el-col :span="10">
        <equipment />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OrderCount from './orderCount.vue'

import TaskCount from './taskCount.vue'
import HotProduct from './hotProduct.vue'
import SaleData from './saleData.vue'
import NodeCollect from './nodeCollect.vue'
import Equipment from './equipment.vue'
export default {
  name: 'Dashboard',

  components: { OrderCount, TaskCount, HotProduct, SaleData, NodeCollect, Equipment },
  data() {
    return {

      orderCout: 0
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/index.scss";
@import "~@/styles/element-ui.scss";

.dashboard-container {
  padding: 20px;
}
.content{
  display: flex;
}
</style>
